<template>
    <!-- 值班计划 -->
    <div>
        <div class="l-panel schedult-box">
            <div class="date-title">
                <div @click="lastMonth"><img src="@/assets/img/icon_left.png" alt=""></div>
                <p>{{titlteYear}}年{{titleMonth}}月</p>
                <div @click="nextMonth"><img src="@/assets/img/icon_right.png" alt=""></div>
            </div>
            <div class="schedult-main">
                <ul class="schedult-week">
                    <li v-for="item in date" :key="item">{{item}}</li>
                </ul>
                <ul class="schedult-day">
                    <li v-for="(item, index) in dateArr" :key="index">
                        <p :class="item.isWork ? 'active' : ''">{{item.dateNum}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="l-panel working-box">
            <template v-if="workData.length != 0">
                <div v-for="(item, index) in workData" :key="index">
                    <span>{{item.schedulingDate}}</span>
                    <span v-if="item.isMorning === '1'">上午</span>
                    <span v-if="item.isAfternoon === '1'">下午</span>
                    <span v-if="item.isNight === '1'">晚上</span>
                    <span>值班</span>
                </div>
            </template>
            <p v-else>暂无值班安排</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                titlteYear: 0,
                titleMonth: 0,
                date: ['日', '一', '二', '三', '四', '五', '六'],
                dateArr: [],
                isToday: [],
                workData: [],
                isTodayWeek: false,
                todayIndex: 0,

            }
        },
        mounted() {
            this.titlteYear = new Date().getFullYear();
            this.titleMonth = new Date().getMonth() + 1;
            this.dateInit(this.titlteYear, this.titleMonth)
        },
        methods: {

            // 下一个月
            nextMonth() {
                //全部时间的月份都是按0~11基准，显示月份才+1
                this.titlteYear = Number(this.titleMonth) > 11 ? this.titlteYear + 1 : this.titlteYear;
                this.titleMonth = (this.titleMonth > 11 ? 0 : Number(this.titleMonth)) + 1;
                this.dateInit(this.titlteYear, this.titleMonth)
                this.getDoctorSchedulingListPc()
            },
            // 上一个月
            lastMonth() {
                //全部时间的月份都是按0~11基准，显示月份才+1
                this.titlteYear = Number(this.titleMonth) - 2 < 0 ? this.titlteYear - 1 : this.titlteYear;
                this.titleMonth = (Number(this.titleMonth) - 2 < 0 ? 11 : Number(this.titleMonth) - 2) + 1;
                this.dateInit(this.titlteYear, this.titleMonth)
                this.getDoctorSchedulingListPc()
            },
            dateInit(setYear, setMonth) {
                //全部时间的月份都是按0~11基准，显示月份才+1
                let dateArr = []; //需要遍历的日历数组数据
                let arrLen = 0; //dateArr的数组长度
                let now = setYear ? new Date(setYear, setMonth - 1) : new Date();
                let year = setYear || now.getFullYear();
                let nextYear = 0;
                let month = (setMonth - 1) || now.getMonth(); //没有+1方便后面计算当月总天数
                let nextMonth = (month + 1) > 12 ? 1 : (month + 1);
                let startWeek = new Date(year + ',' + (Number(month) + 1) + ',' + 1).getDay(); //目标月1号对应的星期
                let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
                let obj = {};
                let num = 0;
                if (month + 1 > 11) {
                    nextYear = year + 1;
                    dayNums = new Date(nextYear, nextMonth, 0).getDate();
                }
                arrLen = startWeek + dayNums;
                for (let i = 0; i < arrLen; i++) {
                    if (i >= startWeek) {
                        num = i - startWeek + 1;
                        obj = {
                            isToday: '' + year + '-' + this.addZero((month + 1)) + '-' + this.addZero(num),
                            dateNum: num,
                            // weight: 5
                        }
                    } else {
                        obj = {};
                    }
                    dateArr[i] = obj;
                }
                this.dateArr = dateArr;
                this.getDoctorSchedulingListPc()
            },
            addZero(num) { //时间转换补零
                if (parseInt(num) < 10) {
                    num = '0' + num;
                }
                return num;
            },
            getDoctorSchedulingListPc() {
                let params = {
                    "doctorId": JSON.parse(this.$getStore('adminUserInfo')).id,
                    "schedulingDate": this.titlteYear + '-' + this.addZero(this.titleMonth),
                }
                this.$ajax.getDoctorSchedulingListPc(params).then(res => {
                    this.workData = res.data.list;
                    this.workData.forEach((item) => {
                        this.dateArr.forEach((ite => {
                            if (item.schedulingDate == ite.isToday) {
                                ite.isWork = true
                            }
                        }))
                    })
                })
            }
        }
    }
</script>

<style lang='scss'>
    .schedult-box {
        padding: 30px;
        width: 100%;
    }

    .working-box {
        padding: 30px;
        width: 100%;
        margin-top: 20px;

        span {
            display: inline-block;
            margin-right: 10px;

            &:first-child {
                color: #3c3c3c;
                font-size: 16px;
            }
        }

        p {
            text-align: center;
            color: #3c3c3c;
            font-size: 16px;
        }
    }

    .date-title {
        font-size: 26px;
        color: #3c3c3c;
        display: flex;
        align-items: center;
        justify-content: center;

        >p {
            margin: 0 40px;
        }

        img {
            width: 8px;
            height: 14px;
            cursor: pointer;
        }
    }

    .schedult-main {
        margin-top: 30px;

        .schedult-week {
            display: flex;
            font-size: 13px;
            color: #757575;
            line-height: 52px;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            border-radius: 6px;

            li {
                width: 14.285%;
                text-align: center;
            }
        }

        .schedult-day {
            display: flex;
            font-size: 18px;
            color: #3c3c3c;
            flex-wrap: wrap;

            li {
                width: 14.285%;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    width: 26px;
                    height: 26px;
                    border-radius: 10px;
                    margin: 20px 0;
                }
            }

            .active {
                background: #006db8;
                color: #fff;
            }
        }
    }
</style>